<!-- 头部导航 -->
<template>
  <div class="echarts_header">
    <div class="echarts_header_title">
      <span class="oblique_left"></span>
      <span>{{title}}</span>
      <span class="oblique_right"></span>
    </div>
    <!-- 全屏显示 -->
    <span class="btn-fullscreen" @click="handleFullScreen">
      <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="top">
        <!-- <i class="el-icon-rank"></i> -->
        <el-button plain>{{fullscreen?`取消全屏`:`全屏`}}</el-button>
      </el-tooltip>
    </span>
  </div>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      fullscreen: false
    };
  },
  props: {
    title: {
      type: String,
      default: '数据中心'
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 全屏事件
    handleFullScreen () {
      if (this.$route.path.indexOf('enterpriseData') == -1) {
        this.$parent.optionChart();
      }
      let element = document.getElementsByClassName('content')[0]
      if (this.fullscreen) {
        element.style.width = '100%'
        element.style.height = '100%'
        element.style.padding = '10px'
        element.style.background = '#fff'
        element.children[0].style.height = null
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        element.style.padding = '0px'
        element.style.width = '100%'
        element.style.background = '#080850'
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    //这是判断全屏状态的
    fullscreenElement () {
      var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement ||
        document.webkitFullscreenElement;
      return fullscreenEle;
    }
  },
  created () { },
  mounted () {
    let that = this
    window.onresize = function () {
      setTimeout(() => {
        if (!that.fullscreenElement()) {
          // that.fullscreen = false
          if (that.fullscreen) {
            that.handleFullScreen()
          }

        }
      })
    };
  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.echarts_header {
    width: 100%;
    height: 48px;
    background: rgba(21, 22, 114, 1);
    opacity: 1;
    position: relative;
}
.echarts_header_title {
    width: 449px;
    height: 46px;
    margin: 0 auto;
    border-top: 48px solid #101dcc;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    position: relative;
}

.btn-fullscreen {
    position: absolute;
    right: 20px;
    top: 8px;
}

.echarts_header_title span {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 46px;
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    top: -48px;
    right: 140px;
}

.oblique_left {
    width: 20px;
    height: 48px;
    background-color: rgba(16, 29, 204, 1);
    text-align: left;
    transform: skewX(45deg);
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    position: absolute;
    right: 500px !important;
}
.oblique_right {
    width: 20px;
    height: 48px;
    background-color: rgba(16, 29, 204, 1);
    text-align: left;
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    position: absolute;
    right: -70px !important;
}

.btn-fullscreen .el-button {
    background: #151672;
    color: #ffffff;
}
</style>